<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>合同信息</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/pdfh5.css" />
		<meta charset="utf-8">
		<style>
			body,
			html {
				width: 100%;
				margin: 0;
				padding: 0;
				height: 100%;
				min-height: 100vh;
				padding-bottom: 32px;
				box-sizing: border-box;
			}

			[v-cloak] {
				display: none;
			}

			#data {
				height: 100%;
			}

			#Pdfh5 {
				height: 95%;
			}


			#canvas-btn {
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 16px;
				padding: 0.26rem;
				padding-left: 43px;
				padding-right: 43px;
			}

			#clear_btn {
				width: 129px;
				height: 32px;
				border-radius: 50px 50px 50px 50px;
				border: 1px solid #1BBFC3;
				background: #fff;
				/* margin: auto; */
				margin-right: 32px;
				text-align: center;
				line-height: 2rem;
				color: #1BBFC3;

			}

			#save_btn {
				width: 129px;
				height: 34px;
				background: #1BBFC3;
				border-radius: 50px 50px 50px 50px;
				text-align: center;
				line-height: 2rem;
				color: #fff;

			}
		</style>
	</head>

	<body>
		<div id="data" v-cloak>
			<div id="app" v-show="showStatus==1">
				<div class="text-wrapper">
					<div class="text part1">
						<div>
							<span class="letter">
								<div class="character">L</div> <span></span>
							</span>
							<span class="letter">
								<div class="character">o</div> <span></span>
							</span>
							<span class="letter">
								<div class="character">a</div> <span></span>
							</span>
							<span class="letter">
								<div class="character">d</div> <span></span>
							</span>
							<span class="letter">
								<div class="character">i</div> <span></span>
							</span>
							<span class="letter">
								<div class="character">n</div> <span></span>
							</span>
							<span class="letter">
								<div class="character">g</div> <span></span>
							</span>
						</div>
					</div>
					<div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
				</div>
			</div>
			<div id="Pdfh5" v-show="showPdf==2"></div>
			<div id="canvas-btn" v-if="status">
				<!-- <div id="clear_btn" @click="refuse()" class="op_btn">拒绝合同</div> -->
				<div id="save_btn" @click="sign()" class="save_btn">{{comfirmText}}</div>
				<div class="cleaerfix"></div>
			</div>
			<!-- <div v-if="signs" style="display:inline;font-size:16px">
				<div>签字信息：</div>
				<div><img :src="signs" width="100%"></div>
			</div> -->
		</div>

		<!-- pdf的js -->

		<script type="text/javascript" src="js/pdf.js"></script>
		<script type="text/javascript" src="js/pdf.worker.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/jweixin-1.3.0.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#data',
				data: {
					showPdf: 1,
					showStatus: 1,
					pdfh5: null,
					signs: "",
					comfirmText: "3S",
					times: 3,
					status: false,
					url: null,
					contractRecordId: null,
				},
				created() {

				},
				mounted: function() {
					document.addEventListener('DOMContentLoaded', () => {
						// 获取URL中的查询参数
						const params = new URLSearchParams(window.location.search);
						const myParam = params.get('myParam');
						const url = params.get('url');
						const contractRecordId = params.get('contractRecordId');
						// 使用获取到的参数
						this.status = myParam != 2
						this.url = url
						this.contractRecordId = contractRecordId
					});
					setTimeout(() => {
						this.initInfo();
					}, 1000)
				},
				methods: {
					getUrlKey(name) {
						return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location
							.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
					},
					initTime() {
						let that = this
						let interval = setInterval(function() {
							if (that.times > 0) {
								that.times = that.times - 1
								that.comfirmText = that.times + "S"
							} else {
								that.comfirmText = "下一步"
								clearInterval(interval)
							}
						}, 1000)
					},
					initInfo() {
						let that = this
						var url = that.getUrlKey("file")
						console.log('url=', url)
						that.signs = that.getUrlKey("signs")
						console.log('signs=', that.signs)
						that.pdfh5 = new Pdfh5('#Pdfh5', {
							// pdfurl: 'https://water-1319794570.cos.ap-guangzhou.myqcloud.com/2024-06-20/278-1718856242145.pdf',
							pdfurl: that.url, //pdf线上地址
							// URIenable:true //开启浏览器地址栏file参数获取
						});

						//pdf准备开始渲染，此时可以拿到pdf总页数
						that.pdfh5.on("ready", function() {
							that.showStatus = 2
							that.showPdf = 2
							that.initTime()
							console.log("pdf准备开始渲染，总页数：" + this.totalNum)
						})
						//监听pdf渲染成功
						that.pdfh5.on("success", function(time) {

							time = time / 1000
							console.log("pdf渲染完成，总耗时" + time + "秒")
						})


					},
					refuse() {
						var that = this;
						var id = that.getUrlKey("id")
						console.log('id=', id)
						wx.miniProgram.navigateTo({
							url: "/subpackageB/pages/contractRefuse?id=" + id
						});
					},
					sign() {
						var that = this;
						var id = that.getUrlKey("id")
						console.log('id=', id)
						if (that.times > 0) {
							return;
						}
						wx.miniProgram.navigateTo({
							// url: "/subpackageB/pages/signContract?id=" + id
							url: "/subpackageA/pages/my/contractManagement/electronicSignature?contractRecordId=" +
								that.contractRecordId
						});
					}
				}
			})
		</script>
	</body>

</html>